src/features/auth/model/use-oauth-redirect-controller.ts (1)

101-101: ⚡ Quick win

신규 회원 리다이렉트 경로도 라우트 상수로 관리해주세요.

Line 101 하드코딩 문자열은 경로 변경 시 누락 위험이 있습니다. 기존 AUTH_ROUTE_PATHS 패턴과 동일하게 상수화하는 게 유지보수에 유리합니다.

💡 제안 패치

-        router.replace('/class?onboarding=true');
+        router.replace(AUTH_ROUTE_PATHS.CLASS_ONBOARDING);

// src/features/auth/model/auth-route.ts
export const AUTH_ROUTE_PATHS = {
  // ...
  CLASS_ONBOARDING: '/class?onboarding=true',
} as const;

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/features/auth/model/use-oauth-redirect-controller.ts` at line 101, The
router.replace('/class?onboarding=true') call in
use-oauth-redirect-controller.ts uses a hardcoded path; add a CLASS_ONBOARDING
entry to the existing AUTH_ROUTE_PATHS constant (e.g., CLASS_ONBOARDING:
'/class?onboarding=true') in auth-route.ts, import AUTH_ROUTE_PATHS into
use-oauth-redirect-controller.ts, and replace the hardcoded string with
router.replace(AUTH_ROUTE_PATHS.CLASS_ONBOARDING) so the route is managed as a
constant like the other auth routes.

src/components/auth/modals/onboarding-modal/onboarding-modal.tsx (1)

3-3: ⚡ Quick win

임의 회전 클래스 대신 명시 아이콘으로 교체해주세요.

Line 119의 rotate-[135deg]는 Tailwind arbitrary value라 가이드와 충돌합니다. 뒤로가기 아이콘을 직접 사용하면 규칙을 지키면서 의도가 더 명확해집니다.

💡 제안 패치

-import { X } from 'lucide-react';
+import { ArrowLeft, X } from 'lucide-react';
@@
-              <X className="h-300 w-300 rotate-[135deg]" />
+              <ArrowLeft className="h-300 w-300" />

As per coding guidelines "`src/**/*.{ts,tsx,css}`: No Tailwind arbitrary values (`p-[4px]`, `w-[320px]`) — use project custom tokens from `global.css`".

Also applies to: 119-119

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/auth/modals/onboarding-modal/onboarding-modal.tsx` at line 3,
The button currently uses the imported X icon with a Tailwind arbitrary rotate
class (`rotate-[135deg]`) which violates project rules; replace that usage by
importing and rendering an explicit back icon (e.g., ArrowLeft or ChevronLeft)
from lucide-react and remove the `rotate-[135deg]` class and any related
transform styles. Locate the `X` import and the JSX that applies
`rotate-[135deg]` in onboarding-modal.tsx (component OnboardingModal) and update
the import to the chosen back icon name and swap the rendered icon so the visual
intent is preserved without arbitrary Tailwind values.

src/components/auth/modals/onboarding-modal/steps/step-1-nickname.tsx (1)

115-115: ⚡ Quick win

임의 폰트 크기 클래스는 토큰 클래스로 교체해주세요.

Line 115의 text-[48px]는 금지된 arbitrary value입니다. global.css에 정의된 타이포 토큰 클래스로 맞춰주세요.

As per coding guidelines "src/components/**/*.{ts,tsx}: Use custom Tailwind tokens from src/app/global.css ... Never use arbitrary pixel or color values like p-[4px], rounded-[8px]".

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/auth/modals/onboarding-modal/steps/step-1-nickname.tsx` at
line 115, Replace the arbitrary Tailwind class text-[48px] on the emoji <span>
in the Step1Nickname component (step-1-nickname.tsx) with the project's
typography token from global.css; locate the span element containing "😊" and
swap text-[48px] for the appropriate token class (e.g., the token that maps to
48px such as text-display-xl or whatever typography token your global.css
defines) so no arbitrary pixel values remain.

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

src/components/auth/modals/onboarding-modal/steps/step-1-nickname.tsx (1)

196-201: ⚡ Quick win

CONSENTS.map의 key/타입 처리 가이드라인을 맞춰주세요.

Line 200의 as keyof Step1Data는 런타임 가드 없는 단언이고, Line 196의 key도 팀 규칙의 ?? index 패턴과 다릅니다.

권장 패치

+type ConsentKey = 'termsAgreed' | 'privacyAgreed' | 'marketingAgreed';
+
-const CONSENTS = [
+const CONSENTS: Array<{ key: ConsentKey; label: string; link: string }> = [
   {
     key: 'termsAgreed' as const,
@@
-const toggleConsent = (key: keyof Step1Data) => {
+const toggleConsent = (key: ConsentKey) => {
   updateData(key, !data[key]);
 };
@@
-        {CONSENTS.map((consent) => (
-          <div key={consent.key} className="flex items-center gap-150">
+        {CONSENTS.map((consent, index) => (
+          <div key={consent.key ?? index} className="flex items-center gap-150">
@@
-              onClick={() => toggleConsent(consent.key as keyof Step1Data)}
+              onClick={() => toggleConsent(consent.key)}
             >

As per coding guidelines, "Use the nullish coalescing operator (??) with index fallback when using array .map() for React keys" 및 "Never use bare as assertions without runtime guards" 규칙을 근거로 했습니다.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/auth/modals/onboarding-modal/steps/step-1-nickname.tsx` around
lines 196 - 201, When mapping CONSENTS, use an index fallback for the React key
and add a runtime guard before casting the consent key to Step1Data: change the
map signature to CONSENTS.map((consent, idx) => ...) and set the element key to
consent.key ?? idx; implement a small type guard function like isStep1DataKey(k:
string | undefined): k is keyof Step1Data and use it in the onClick handler to
check the consent.key (or computed fallback) before calling
toggleConsent(consentKey); if the guard fails, skip or log a warning instead of
using a bare as assertion. Ensure you reference CONSENTS, Step1Data,
toggleConsent, and the new isStep1DataKey guard in the fix.